<template>
  <div class="top-banner">
    <el-carousel height="80px" :interval="3000" arrow="always" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index" class="carousel-item">
        <div class="carousel-content">
          {{ item }}
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const carouselItems = ref([
  '国家基因组科学数据中心中医药分中心开发完成中药标准核酸序列平台欢迎使用',
  '国家基因组科学数据中心中医药分中心开发完成中药标准核酸序列平台欢迎使用',
  '国家基因组科学数据中心中医药分中心开发完成中药标准核酸序列平台欢迎使用',
]);
</script>

<style scoped>
/* 第一部分：走马灯样式 */
.top-banner {
  width: 100%;
  background: url('/images/carousel_background.jpg') no-repeat center center;
  background-size: cover;
  padding: 20px 0;
  margin-bottom: 0px;
  height: 120px;
}

.carousel-content {
  background-color: rgba(255, 255, 255, 0.5);
  color: #37548d;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin: 0 20%;
  padding: 0 10px;
}

/* 修改指示器为圆形并加深颜色 */
:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #333; /* 激活状态指示器颜色 */
}

:deep(.el-carousel__indicator:not(.is-active) .el-carousel__button) {
  background-color: #999; /* 非激活状态指示器颜色 */
  opacity: 0.8;
}

:deep(.el-carousel__indicator .el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* 加深箭头颜色 */
:deep(.el-carousel__arrow) {
  color: #333;
  background-color: rgba(255, 255, 255, 0.7);
}

:deep(.el-carousel__arrow:hover) {
  color: #000;
  background-color: rgba(255, 255, 255, 0.9);
}
</style>